<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后台管理-任务</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta name="description" content="Developed By M Abdur Rokib Promy">
    <meta name="keywords" content="Admin, Bootstrap 3, Template, Theme, Responsive">
    <!-- bootstrap 3.0.2 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- font Awesome -->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- google font -->
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <!-- Theme style -->
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body class="skin-black">
<!-- header logo: style can be found in header.less -->
<header class="header">
    <a href="index.html" class="logo">
        <!-- Add the class icon to your logo image or logo icon to add the margining -->
        Director
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="navbar-right">
            <ul class="nav navbar-nav">
                <!-- Messages: style can be found in dropdown.less-->
                <li class="dropdown messages-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-envelope"></i>
                        <span class="label label-success">4</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">You have 4 messages</li>
                        <li>
                            <!-- inner menu: contains the actual data -->
                            <ul class="menu">
                                <li>
                                    <!-- start message -->
                                    <a href="#">
                                        <div class="pull-left">
                                            <img src="img/avatar3.png" class="img-circle" alt="User Image"/>
                                        </div>
                                        <h4>
                                            Support Team
                                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
                                        </h4>
                                        <p>Why not buy a new awesome theme?</p>
                                    </a>
                                </li>
                                <!-- end message -->
                                <li>
                                    <a href="#">
                                        <div class="pull-left">
                                            <img src="img/avatar2.png" class="img-circle" alt="user image"/>
                                        </div>
                                        <h4>
                                            Director Design Team
                                            <small><i class="fa fa-clock-o"></i> 2 hours</small>
                                        </h4>
                                        <p>Why not buy a new awesome theme?</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="pull-left">
                                            <img src="img/avatar.png" class="img-circle" alt="user image"/>
                                        </div>
                                        <h4>
                                            Developers
                                            <small><i class="fa fa-clock-o"></i> Today</small>
                                        </h4>
                                        <p>Why not buy a new awesome theme?</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="pull-left">
                                            <img src="img/avatar2.png" class="img-circle" alt="user image"/>
                                        </div>
                                        <h4>
                                            Sales Department
                                            <small><i class="fa fa-clock-o"></i> Yesterday</small>
                                        </h4>
                                        <p>Why not buy a new awesome theme?</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="pull-left">
                                            <img src="img/avatar.png" class="img-circle" alt="user image"/>
                                        </div>
                                        <h4>
                                            Reviewers
                                            <small><i class="fa fa-clock-o"></i> 2 days</small>
                                        </h4>
                                        <p>Why not buy a new awesome theme?</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="footer">
                            <a href="#">See All Messages</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown tasks-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-tasks"></i>
                        <span class="label label-danger">9</span>
                    </a>
                    <ul class="dropdown-menu">

                        <li class="header">You have 9 tasks</li>
                        <li>
                            <!-- inner menu: contains the actual data -->
                            <ul class="menu">
                                <li>
                                    <!-- Task item -->
                                    <a href="#">
                                        <h3>
                                            Design some buttons
                                            <small class="pull-right">20%</small>
                                        </h3>
                                        <div class="progress progress-striped xs">
                                            <div class="progress-bar progress-bar-success" style="width: 20%"
                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                 aria-valuemax="100">
                                                <span class="sr-only">20% Complete</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <!-- end task item -->
                                <li>
                                    <!-- Task item -->
                                    <a href="#">
                                        <h3>
                                            Create a nice theme
                                            <small class="pull-right">40%</small>
                                        </h3>
                                        <div class="progress progress-striped xs">
                                            <div class="progress-bar progress-bar-danger" style="width: 40%"
                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                 aria-valuemax="100">
                                                <span class="sr-only">40% Complete</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <!-- end task item -->
                                <li>
                                    <!-- Task item -->
                                    <a href="#">
                                        <h3>
                                            Some task I need to do
                                            <small class="pull-right">60%</small>
                                        </h3>
                                        <div class="progress progress-striped xs">
                                            <div class="progress-bar progress-bar-info" style="width: 60%"
                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                 aria-valuemax="100">
                                                <span class="sr-only">60% Complete</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <!-- end task item -->
                                <li>
                                    <!-- Task item -->
                                    <a href="#">
                                        <h3>
                                            Make beautiful transitions
                                            <small class="pull-right">80%</small>
                                        </h3>
                                        <div class="progress progress-striped xs">
                                            <div class="progress-bar progress-bar-warning" style="width: 80%"
                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                 aria-valuemax="100">
                                                <span class="sr-only">80% Complete</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <!-- end task item -->
                            </ul>
                        </li>
                        <li class="footer">
                            <a href="#">View all tasks</a>
                        </li>

                    </ul>
                </li>
                <!-- User Account: style can be found in dropdown.less -->
                <li class="dropdown user user-menu">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-user"></i>
                        <span>Jane Doe <i class="caret"></i></span>
                    </a>
                    <ul class="dropdown-menu dropdown-custom dropdown-menu-right">
                        <li class="dropdown-header text-center">Account</li>

                        <li>
                            <a href="#">
                                <i class="fa fa-clock-o fa-fw pull-right"></i>
                                <span class="badge badge-success pull-right">10</span> Updates</a>
                            <a href="#">
                                <i class="fa fa-envelope-o fa-fw pull-right"></i>
                                <span class="badge badge-danger pull-right">5</span> Messages</a>
                            <a href="#"><i class="fa fa-magnet fa-fw pull-right"></i>
                                <span class="badge badge-info pull-right">3</span> Subscriptions</a>
                            <a href="#"><i class="fa fa-question fa-fw pull-right"></i> <span class="badge pull-right">11</span>
                                FAQ</a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="#">
                                <i class="fa fa-user fa-fw pull-right"></i> Profile
                            </a>
                            <a data-toggle="modal" href="#modal-user-settings">
                                <i class="fa fa-cog fa-fw pull-right"></i> Settings
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="#"><i class="fa fa-ban fa-fw pull-right"></i> Logout</a>
                        </li>
                    </ul>

                </li>
            </ul>
        </div>
    </nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="left-side sidebar-offcanvas">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="img/avatar3.png" class="img-circle" alt="User Image"/>
                </div>
                <div class="pull-left info">
                    <p>Hello, Jane</p>

                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>
            <!-- search form -->
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search..."/>
                    <span class="input-group-btn">
                                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i
                                        class="fa fa-search"></i></button>
                            </span>
                </div>
            </form>
            <ul class="sidebar-menu">
                <li>
                    <a href="index.html">
                        <i class="fa fa-dashboard"></i> <span>首页</span>
                    </a>
                </li>
                <!--<li>
                    <a href="general.html">
                        <i class="fa fa-gavel"></i> <span>General</span>
                    </a>
                </li>-->

                <li class="active">
                    <a href="task.html">
                        <i class="fa fa-globe"></i> <span>任务管理</span>
                    </a>
                </li>

                <li>
                    <a href="configList.html">
                        <i class="fa fa-glass"></i> <span>配置管理</span>
                    </a>
                </li>

            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="right-side">

        <!-- Main content -->
        <section class="content">

            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <!--<header class="panel-heading">
                            <button type="button" data-toggle="modal" href="#add" class="btn btn-sm btn-primary">新增</button>
                        </header>-->
                        <div class="panel-body">
                            <table class="table table-bordered" id="configGrid">

                            </table>

                        </div>
                    </div>
                </div>
            </div>
</div>
</div>

</section>
<!-- /.content -->
<!--modal-->


</aside>
<!-- /.right-side -->
</div>
<!-- ./wrapper -->

<!-- jQuery 2.0.2 -->
<script src="js/jquery.min.js" type="text/javascript"></script>

<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- Director App -->
<script src="js/Director/app.js" type="text/javascript"></script>
<script src="js/doT.js" type="text/javascript"></script>
<script src="js/utils.js"></script>
<script id="configTemplate" type="text/x-dot-template">
    <tr>
        <th>名称</th>
        <!--<th>状态1</th>-->
        <th>定时任务状态</th>
        <th>开始页</th>
        <th>结束页</th>
        <th>线程数</th>
        <th>执行周期</th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th>更新条数</th>
        <th>操作</th>
    </tr>
    {{ for(var index in it ){ }}
    <tr>
        <td>{{=it[index].name}}</td>
        <td>
            {{? it[index].timerIsRuning == true }}
            <span class="label label-success">运行</span>
            {{??}}
            <span class="label label-danger">停止</span>
            {{?}}
        </td>
        <td>{{=it[index].startPage}}</td>
        <td>{{=it[index].endPage}}</td>
        <td>{{=it[index].threadNumber}}</td>
        <td>{{=it[index].period}}</td>
        {{? !it[index].startDatetime}}
        <td>/</td>
        {{??}}
        <td>{{=it[index].startDatetime}}</td>
        {{?}}

        {{? !it[index].endDatetime}}
        <td>/</td>
        {{??}}
        <td>{{=it[index].endDatetime}}</td>
        {{?}}

        {{? !it[index].updateRows}}
        <td>0</td>
        {{??}}
        <td>{{=it[index].updateRows}}</td>
        {{?}}

        <td>
            {{? it[index].timerIsRuning == false }}
            <button type="button" class="btn btn-sm btn-primary"
                    onclick="config.timerRun('{{=it[index].id}}')">启动
            </button>
            {{??}}
            <button type="button" class="btn btn-sm btn-primary" onclick="config.timerStop('{{=it[index].id}}')">停止
            </button>
            {{?}}

        </td>
    </tr>
    {{ } }}
</script>
<script>
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };


    var config = {

        loadConfigList: function () {

            commons.ajax({
                url: commons.routPath + '/task/all',
                type: 'get',
                async: true,
                success: function (data) {
                    if (data.meta.code === '200') {
                        var dataList = data.body.taskList;
                        var tmpl = doT.template($("#configTemplate").text());
                        // 将数据扔进templ中。并在DIV中显示出来
                        $("#configGrid").html(tmpl(dataList));
                    } else {
                        if (data.meta.message == 'unLogin') {
                            //跳转到登录页面
                            location.href = '/login.html'
                        } else {
                            alert(data.meta.message);
                        }
                    }
                }
            });
        },

        reLoadConfigList: function () {
            config.loadConfigList();
        },

        openRunWindow: function (id) {
            $("#taskId").val(id);
            $("#runTaskModal").modal("show");
        },
        opentimerRunWindow: function (id) {
            $("#timertaskId").val(id);
            $("#runtimerTaskModal").modal("show");
        },
        timerRun: function ( id ) {
            var runConfig = $("#runtimerTaskForm").serializeObject();
            commons.ajax({
                url: commons.routPath + "/task/" + id + "/timer/start/",
                type: 'PUT',
                async: true,
                success: function (data) {
                    if (data.meta.code === '200') {
                        config.reLoadConfigList();
                    } else {
                        if (data.meta.message == 'unLogin') {
                            //跳转到登录页面
                            location.href = '/login.html'
                        } else {
                            alert(data.meta.message);
                        }
                    }
                }
            });
        },
        run: function () {
            var runConfig = $("#runTaskForm").serializeObject();
            commons.ajax({
                url: commons.routPath + "/task/" + runConfig.id + "/start/" + runConfig.startPage + "/" + runConfig.endPage + "/" + runConfig.thredNumber,
                type: 'PUT',
                async: true,
                success: function (data) {
                    if (data.meta.code === '200') {
                        config.reLoadConfigList();
                        $("#runTaskModal").modal("hide");
                    } else {
                        if (data.meta.message == 'unLogin') {
                            //跳转到登录页面
                            location.href = '/login.html'
                        } else {
                            alert(data.meta.message);
                        }
                    }
                }
            });

        },
        timerStop: function (id) {
            commons.ajax({
                url: commons.routPath + "/task/" + id + "/timer/stop",
                type: 'PUT',
                async: true,
                success: function (data) {
                    if (data.meta.code === '200') {
                        config.reLoadConfigList();
                    } else {
                        if (data.meta.message == 'unLogin') {
                            //跳转到登录页面
                            location.href = '/login.html'
                        } else {
                            alert(data.meta.message);
                        }
                    }
                }
            });
        },
        stop: function (id) {
            commons.ajax({
                url: commons.routPath + "/task/" + id + "/stop",
                type: 'PUT',
                async: true,
                success: function (data) {
                    if (data.meta.code === '200') {
                        config.reLoadConfigList();
                    } else {
                        if (data.meta.message == 'unLogin') {
                            //跳转到登录页面
                            location.href = '/login.html'
                        } else {
                            alert(data.meta.message);
                        }
                    }
                }
            });
        },

        fastRun: function (id) {
            commons.ajax({
                url: commons.routPath + "/task/run/" + id,
                type: 'PUT',
                async: true,
                success: function (data) {
                    if (data.meta.code === '200') {
                        config.reLoadConfigList();
                    } else {
                        if (data.meta.message == 'unLogin') {
                            //跳转到登录页面
                            location.href = '/login.html'
                        } else {
                            alert(data.meta.message);
                        }
                    }
                }
            });

        }

    }


    //进入到此页面后就加载数据
    $(function () {
        $("#startRunTask").click(function () {
            //TODO:新增
            config.run();
        });
        $("#startTimerRunTask").click(function () {
            config.timerRun();
        })

        //初始化列表数据
        config.loadConfigList();

    });
</script>
<div class="modal fade" id="loadWaiting">
    <div class="modal-dialog modal-sm" style="text-align: center;vertical-align: middle;">
        <img alt=""
             src=""/>
    </div>
</div>
</body>

</html>